<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="html,html5">
    <meta name="viewport"
          content="width=device-width,height=device-height,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">

    <title>Title</title>
</head>
<body>
<!--结构性标签-->
<header>
    <h1>网页标题</h1>
    <nav>
        <ul>
            <li><a href="#">导航</a></li>
            <li><a href="#">导航</a></li>
            <li><a href="#">导航</a></li>
            <li><a href="#">导航</a></li>
        </ul>
    </nav>
</header>

<section>
    <h1>新章节标题</h1>
    <article>
        <h2>第一节的标题</h2>
        <time datetime="2017-12-11">2017.12.11</time>
        <p>第一节内容</p>
    </article>
</section>

<footer>
    网页版权声明
</footer>

<!--块级性标签-->
<aside>
    <p>作者信息</p>
</aside>

<figure>
    <figcaption>风景图的标题</figcaption>
    <img src="#" alt="风景图">
</figure>

<code>一段电脑代码</code>

<!--行内标签-->
<meter value="6" min="0" max="10">6/10</meter>
<meter value="0.3">50%</meter>

<p>
    <time datetime="2015-12-12">中秋节</time>
    马上就到了
</p>

<p>下载进度：</p>
<progress value="34" max="100"></progress>

<!--新的属性-->
<p contenteditable="true" draggable="true" dropzone="link" translate="no" spellcheck="true" hidden>新属性</p>

<!--表单-->
<form id="myForm"></form>
<input type="text" form="myForm" value=""><br>
<input type="email"><br>
<input type="url"><br>
<input type="date"><br>
<input type="time"><br>
<input type="month"><br>
<input type="week"><br>
<input type="datetime-local"><br>
<input type="number" max="20" min="0" step="1" value="5"><br>
<input type="range" max="10" min="0" step="1" value="3"><br>
<input type="search"><br>
<input type="tel"><br>
<input type="color"><br>
<input type="text" list="my_list" placeholder="热门书记排行榜"><br>
<datalist id="my_list"><br>
    <option label="top1" value="h5"></option>
    <option label="top2" value="h5"></option>
    <option label="top3" value="h5"></option>
    <option label="top4" value="h5"></option>
</datalist>
单价：<input type="text" value="10" id="price" readonly>
数目：<input type="text" id="num">
总价：<output id="total"></output>
<script>
    window.onload=function () {
        var num = document.getElementById('num');
        var total = document.getElementById('total');
        num.onblur=function () {
            var totalprice =parseInt(document.getElementById('price').value)*parseInt(this.value);
            total.value=totalprice;
        }
    }
</script>
</body>
</html>